import {ElMessage} from 'element-plus';
import ArkDialogForm from '@/components/ark-component-v1/ark-dialog-form/ArkDialogForm.vue';
import ArkDialogFormConstant from '@/components/ark-component-v1/ark-dialog-form/ArkDialogFormConstant.js';

export default {
  title: 'ark-component-v1/ArkDialogForm',
  component: ArkDialogForm,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、element-plus、element-plus-icons、tailwindcss、lodash</span> 使用`
      }
    }
  },
  argTypes: {
    visible: {description: '对话框是否可见'},
    dialogOptions: {description: '对话框配置对象'},
    formOptions: {description: '表单配置对象'},
    'dialog-title': {description: '对话框标题部分'},
    'dialog-body-top': {description: '对话框主体上部分'},
    default: {description: '对话框主体整个表单部分'},
    '\'form-item-label-\' + formItem.prop': {description: '表单项名称部分，作用域参数为某项formOptions.formItem'},
    '\'form-item-component-\' + formItem.prop': {description: '表单项组件部分，作用域参数为某项formOptions.formItem'},
    'dialog-body-bottom': {description: '对话框主体下部分'},
    'dialog-footer': {description: '对话框页脚部分'},
    'update:visible': {description: '对话框关闭后dialogOptions.visible更新事件，参数为更新后的值'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {ArkDialogForm},
    setup() {
      return {args};
    },
    template: `
      <div style="width: 850px;height: 700px">
        <el-button type="primary" @click="args.visible=true">打开表单对话框</el-button>

        <ArkDialogForm v-bind="args" v-model:visible="args.visible"/>
      </div>
    `,
  }),
  args: {
    visible: false,
    dialogOptions: {
      beforeClose: () => {
        ElMessage({
          message: '关闭对话框前的操作，无参数',
          type: 'success',
        });
      },
      attributes: {
        width: '80%'
      },
      header: {
        title: '表单对话框标题',
      },
      footer: {
        confirm: {
          click: (formModel) => {
            ElMessage({
              message: '表单确认操作，参数请看控制台打印',
              type: 'success',
            });
            console.log('表单确认操作参数', formModel);
          }
        },
      }
    },
    formOptions: {
      rules: {
        name: [
          {required: true, message: '姓名不能为空', trigger: 'blur'},
          {min: 3, max: 5, message: '姓名必须为3至5个字', trigger: 'blur'},
        ]
      },
      validateFail: (invalidFields) => {
        ElMessage({
          message: '表单验证失败回调，参数请看控制台打印',
          type: 'success',
        });
        console.log('表单验证失败回调参数', invalidFields);
      },
      formItems: [
        {
          prop: 'name',
          label: '姓名',
          tip: '姓甚名谁',
          defaultValue: '你谁啊'
        },
        {
          prop: 'sex',
          label: '性别',
          type: ArkDialogFormConstant.operation.select,
          selectOptions: {
            options: [
              {
                label: '男',
                value: 'man',
              },
              {
                label: '女',
                value: 'woman',
              },
            ]
          }
        },
        {
          prop: 'hobby',
          label: '爱好',
          type: ArkDialogFormConstant.operation.select,
          selectOptions: {
            groups: [
              {
                label: '美食',
                options: [
                  {
                    label: '米饭',
                    value: 'rice',
                  },
                  {
                    label: '馒头',
                    value: 'steamed',
                  },
                ]
              },
              {
                label: '运动',
                options: [
                  {
                    label: '篮球',
                    value: 'basketball',
                  },
                  {
                    label: '跑步',
                    value: 'run',
                  },
                ]
              }
            ]
          }
        },
        {
          prop: 'location',
          label: '位置',
          type: ArkDialogFormConstant.operation.cascader,
          attributes: {
            clearable: true,
            props: {multiple: true},
            options: [
              {
                label: '一号楼',
                value: 'build1',
                children: [
                  {
                    label: '一层',
                    value: 'floor11',
                    children: [
                      {
                        label: '房间1',
                        value: 'room111',
                      },
                      {
                        label: '房间2',
                        value: 'room112',
                      },
                    ]
                  },
                  {
                    label: '二层',
                    value: 'floor12',
                  },
                  {
                    label: '三层',
                    value: 'floor13',
                  },
                ]
              },
              {
                label: '二号楼',
                value: 'build2',
                children: [
                  {
                    label: '一层',
                    value: 'floor21',
                  },
                  {
                    label: '二层',
                    value: 'floor22',
                  },
                  {
                    label: '三层',
                    value: 'floor23',
                  },
                ]
              }
            ]
          }
        },
        {
          prop: 'date',
          label: '日期选择框',
          type: ArkDialogFormConstant.operation.datePicker,
        },
        {
          prop: 'time1',
          label: '时间选择框',
          type: ArkDialogFormConstant.operation.timePicker,
        },
        {
          prop: 'time2',
          label: '时间选择框',
          type: ArkDialogFormConstant.operation.timeSelect,
        },
      ]
    }
  },
};